<template>
<div>
     <div class="banner" @click="bannerclick">
       <img class=" banner-img" src="http://img1.qunarzz.com/sight/p0/1503/55/5577ab22b2e205d0.water.jpg_600x330_2a541cbf.jpg"  alt="">
       <div class="banner-info">
            <div class="banner-number"><span class="iconfont">&#xe643;</span>33</div>
           <div class="banner-title">黄鹤楼(AAAAA景区)</div>
          
       </div>
       <div class="banner-black"></div>
    
    
    </div>
     <detail-animation>
       <common-gallery 
         :galleryimgs="galleryimgs" v-show="showGallery" @close="bannerclose">
       </common-gallery>

     </detail-animation>
     
</div>

</template>

<script>
import CommonGallery from 'common/gallery/Gallery'
import DetailAnimation from 'common/fade/animation'
    export default {
        name:"DetailBanner",
        data(){
          return {
              showGallery:false,
              galleryimgs:[
              'http://img1.qunarzz.com/sight/p0/1503/55/5577ab22b2e205d0.water.jpg_r_800x800_f290c9cd.jpg',
              'http://img1.qunarzz.com/sight/p0/1503/fe/fe5c99cd2e6f7595.water.jpg_r_800x800_a3601039.jpg']
          } 
        },
        components:{
            CommonGallery,
            DetailAnimation
        },
        methods:{
            bannerclick(){
              this.showGallery=true   
            },
            bannerclose(){
              this.showGallery=false
            }
        }
    }
</script>

<style lang="stylus" scoped>
.banner
  position relative
  overflow hidden
  height 0
  padding-bottom 55%
 .banner-img
   width 100% 
 .banner-black
     background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8)) 
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     min-height: .6rem; 
 .banner-info
   overflow hidden
   padding-left .3rem
   position absolute
   left 0
   rigth 0
   bottom .2rem
   line-height .6rem 
   
   .banner-title
     color #fff
     font-size .36rem
   .banner-number
     width .8rem 
     padding 0 .2rem
     line-height .4rem
     height .4rem
     border-radius .2rem
     background #000
     opacity .7
     color #fff
</style>